<template>
  <div class="menuItem">
    <div class="menuItem-login">
      <img src="../assets/logo.png" alt="">
    </div>
    <el-menu
        router
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="/home"
        text-color="#fff"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item index="/home/dashboard">
          <el-icon><Menu /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/home/users">
          <el-icon><document /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/home/roles">
          <el-icon><setting /></el-icon>
          <span>角色管理</span>
        </el-menu-item>
        <el-menu-item index="/home/menus">
          <el-icon><setting /></el-icon>
          <span>菜单管理</span>
        </el-menu-item>
      </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup () {
    const isCollapse = ref(false)
    const handleOpen = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }
    const handleClose = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }
    return {
      isCollapse,
      handleOpen,
      handleClose
    }
  }
})
</script>
<style lang="scss" scoped>
.menuItem{
  height: 100%;
  display: flex;
  flex-direction: column;
  .menuItem-login{
    background-color:#545c64;
    width: 199px;
    padding: 13px 0;
    text-align: center;
    border-bottom: 1px solid #cccccc;
    img{
      height: 30px;
    }
  }
}
.el-menu-vertical-demo{
  height: 100%;
  border-right: 0;
}
</style>
